Extension point flavors

In component org.nuxeo.theme.styling.service

Documentation

The flavors extension point allows to define a set of variables that can be referenced inside CSS files, for dynamic replacement depending on context, as well as a logo.

Example:

    <flavor name="default">
        <label>label.theme.flavor.nuxeo.default</label>
        <logo>
            <path>/img/nuxeo_logo.png</path>
            <previewPath>/img/nuxeo_preview_logo_black.png</previewPath>
            <width>113</width>
            <height>20</height>
            <title>Nuxeo</title>
        </logo>
        <links>
            <icon name="icon">/icons/favicon.png</icon>
            <icon name="shortcut icon">/icons/favicon.ico</icon>
        </links>
        <presetsList>
            <presets category="border" src="themes/palettes/default-borders.properties"/>
            <presets category="background" src="themes/palettes/default-backgrounds.properties"/>
            <presets category="font" src="themes/palettes/default-fonts.properties"/>
            <presets category="color" src="themes/palettes/default-colors.properties"/>
        </presetsList>
        <palettePreview>
            <colors>
                <color>#17384e</color>
                <color>#00adff</color>
                <color>#00adff</color>
                <color>#00adff</color>
                <color>#fff</color>
                <color>#00adff</color>
                <color>#404040</color>
                <color>#cfecff</color>
                <color>#e6f1ff</color>
            </colors>
        </palettePreview>
    </flavor>

The presets files are looked up in the jar holding the flavor declaration. CSS files will reference the flavor marker, as well as additionnal hint about the type of preset to use:

        .nx-page input[type="button"] {
          background: none "button (__FLAVOR__ background)";
          border-radius: 2px;
          border: 1px solid;
          border-color: "button (__FLAVOR__ border)";
          color: "link.action (__FLAVOR__ color)";
          cursor: pointer;
          display: inline-block;
          font-size: .95em;
          font-weight: bold;
          line-height: 1.3em;
          margin: 0 .5em .5em 0;
          padding: .4em .9em;
          text-decoration: none;
          white-space: nowrap }

The current flavor can be computed at runtime using negotiator logics, see the negotiators extension point on this service.

The default flavor defined for a given page will be used if the page does not accept this flavor in its configuration.

Attribute "links" is available only since 7.4 and allows to define favicons visible on the page (it was previously defined by the Theme extension point layout configuration).

Contribution Descriptors

Class: org.nuxeo.theme.styling.service.descriptors.FlavorDescriptor

Existing Contributions

Contributions are presented in the same order as the registration order on this extension point. This order is displayed before the contribution name, in brackets.

<extension point="flavors" target="org.nuxeo.theme.styling.service">

    <flavor name="default">
      <label>label.theme.flavor.nuxeo.default</label>
      <logo>
        <path>/img/nuxeo_logo.png</path>
        <previewPath>/img/nuxeo_preview_logo_black.png</previewPath>
        <width>113</width>
        <height>20</height>
        <title>Nuxeo</title>
      </logo>
      <links>
        <icon name="icon">/icons/favicon.png</icon>
        <icon name="shortcut icon">/icons/favicon.ico</icon>
      </links>
      <presetsList>
        <presets category="border" src="themes/palettes/default-borders.properties"/>
        <presets category="background" src="themes/palettes/default-backgrounds.properties"/>
        <presets category="font" src="themes/palettes/default-fonts.properties"/>
        <presets category="color" src="themes/palettes/default-colors.properties"/>
      </presetsList>
      <palettePreview>
        <colors>
          <color>#17384e</color>
          <color>#00adff</color>
          <color>#00adff</color>
          <color>#00adff</color>
          <color>#fff</color>
          <color>#00adff</color>
          <color>#404040</color>
          <color>#cfecff</color>
          <color>#e6f1ff</color>
        </colors>
      </palettePreview>
      <sass>
        <import src="themes/palettes/common_variables.scss"/>
        <import src="themes/palettes/default_variables.scss"/>
      </sass>
    </flavor>

    <flavor name="rainbow">
      <label>label.theme.flavor.nuxeo.rainbow</label>
      <logo>
        <path>/img/nuxeo_logo.png</path>
        <previewPath>/img/nuxeo_preview_logo_black.png</previewPath>
        <width>113</width>
        <height>20</height>
        <title>Nuxeo</title>
      </logo>
      <links>
        <icon name="icon">/icons/favicon.png</icon>
        <icon name="shortcut icon">/icons/favicon.ico</icon>
      </links>
      <presetsList append="true">
        <presets category="border" src="themes/palettes/rainbow-borders.properties"/>
        <presets category="background" src="themes/palettes/rainbow-backgrounds.properties"/>
        <presets category="font" src="themes/palettes/rainbow-fonts.properties"/>
        <presets category="color" src="themes/palettes/rainbow-colors.properties"/>
      </presetsList>
      <palettePreview>
        <colors>
          <color>#595ca1</color>
          <color>#bdd4ef</color>
          <color>#4095ff</color>
          <color>#da4f70</color>
          <color>#41b6ab</color>
          <color>#b34f94</color>
          <color>#332e2e</color>
          <color>#cfffd1</color>
          <color>#feffe6</color>
        </colors>
      </palettePreview>
      <sass>
        <import src="themes/palettes/common_variables.scss"/>
        <import src="themes/palettes/alternative_variables.scss"/>
      </sass>
    </flavor>

  </extension>

(0) nuxeo-platform-webapp-core-2021.1.jar/OSGI-INF/theme-contrib.xml Override